<template>
  <!-- 页面分析 -->
  <div class="page-home">
    <!-- 头部时间 -->
    <!-- <pageAnalysisHeader></pageAnalysisHeader> -->
    <div class="main base-section">
      <div class="mod-page-effect">
        <!-- <p class="strong">严正声明：</p>
    <p class="content">沙鲜送商城专业版并非一个开源软件，作者保留全部的权利。 擅自窃用，即属严重侵权行为，与盗窃无异。产生的一切任何后果责任由侵权者自负。
        擅自窃用，必将追究法律责任！！！</p>-->

        <!-- 数据 -->

        <!-- 实时概况板块 -->
        <div class="realtime-situation">
          <div></div>
          <!-- 商品概况列表 -->
          <div class="item-list">
            <el-form :inline="true" :model="dataForm" class="form-inline base-section">
              <!-- 头部统计时间栏start -->
              <el-form-item>
                <div class="header-title">{{$t('dataAnalysis.statisticalTime')}}</div>
                <div class="title-right">
                  <el-select
                    v-model="dateValue"
                    @change="setDateRange(dateValue)"
                    style="width:100px;height: 15px;"
                    size="mini"
                  >
                    <el-option
                      v-for="item in dateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                  <span class="title-time" v-if="dateValue === 4">{{this.nowDate}}</span>
                  <button
                    v-if="dateValue === 4"
                    data-v-3baf97fc
                    class="el-button el-button--text el-button--small"
                    @click="flushDateTime"
                    type="button"
                  >{{$t('dataAnalysis.refresh')}}</button>
                </div>

                <div class="title-picker">
                  <el-date-picker
                    size="mini"
                    style="width: 150px;"
                    v-if="dateValue === 1 "
                    v-model="preDay"
                    @change="changeDay"
                    type="date"
                    :placeholder="$t('dataAnalysis.selectDate')"
                    :picker-options="PickerOptions"
                  ></el-date-picker>
                </div>
                <div class="title-picker">
                  <el-date-picker
                    size="mini"
                    style="width: 230px;"
                    v-if="dateValue === 2 "
                    v-model="preWeek"
                    type="week"
                    :format="`yyyy ${$t('dataAnalysis.the')} WW ${$t('dataAnalysis.week')}`"
                    :placeholder="$t('dataAnalysis.selectWeek')"
                    :picker-options="weekPickerOptions"
                    @change="changeWeek"
                  ></el-date-picker>
                </div>

                <div class="title-picker">
                  <el-date-picker
                    size="mini"
                    style="width: 150px;"
                    v-if="dateValue === 3 "
                    v-model="preMonth"
                    type="month"
                    :placeholder="$t('dataAnalysis.selectMonth')"
                    :picker-options="monthPickerOptions"
                    value-format="timestamp"
                    @change="changeMonth"
                  ></el-date-picker>
                </div>
                <span
                  class="title-time"
                  v-if="(dateValue === 5 || dateValue === 6 || dateValue === 2) && startTime && endTime"
                >{{startTime}} - {{endTime}}</span>
              </el-form-item>
            </el-form>
            <!-- 头部统计时间栏end -->

            <!-- 导航栏切换start -->
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane :label="$t('dataAnalysis.microPageAnalysis')" name="1"></el-tab-pane>
              <el-tab-pane :label="$t('dataAnalysis.businessPageAnalysis')" name="2"></el-tab-pane>
            </el-tabs>
            <!-- end -->

            <!-- 页面详情列表 -->
            <el-form :model="form" class="form-inline base-section">
              <div class="form-inline-title">{{$t('dataAnalysis.pageBrowsing')}}</div>
              <el-form-item>
                <el-checkbox-group v-model="form.saleIndex">
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.pageviews')" checked>
                    <span>{{$t('dataAnalysis.pageviews')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                       {{$t('dataAnalysis.pageviewsTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                    <!-- <i class="el-icon-question"></i> -->
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.numberOfVisitors')" checked>
                    <span>{{$t('dataAnalysis.numberOfVisitors')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.visitorsTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.clicks')">
                    <span>{{$t('dataAnalysis.clicks')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.clicksTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.clicksVisitors')">
                    <span>{{$t('dataAnalysis.clicksVisitors')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.clicksVisitorsTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.clicksRatio')">
                    <span>{{$t('dataAnalysis.clicksRatio')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">{{$t('dataAnalysis.clicksRatioTips')}}</div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <!-- <el-checkbox class="checkbox-item" name="saleIndex" label="跳失率">
                    <span>跳失率</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        统计时间内，页面访客中没有发生点击行为的人数/访客数，
                        <br />即1-点击人数/访客数
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>-->
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.stayTime')">
                    <span>{{$t('dataAnalysis.stayTime')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">{{$t('dataAnalysis.stayTimeTips')}}</div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.shareTimes')">
                    <span>{{$t('dataAnalysis.shareTimes')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.shareTimesTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.sharePeopleTimes')">
                    <span>{{$t('dataAnalysis.sharePeopleTimes')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.sharePeopleTimesTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div class="form-inline-title">{{$t('dataAnalysis.guidingTransformation')}}</div>
              <el-form-item>
                <!-- :style="selectNum >= 8 ? 'pointer-events: none;' : ''" 设置不能点击 -->
                <el-checkbox-group v-model="form.serviceIndex">
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.gTOrderAmount')">
                    <span>{{$t('dataAnalysis.gTOrderAmount')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                       {{$t('dataAnalysis.gTTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.gTNumber')">
                    <span>{{$t('dataAnalysis.gTNumber')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.gTOrderTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.bAOC')">
                    <span>{{$t('dataAnalysis.bAOC')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.bAOCTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.gtPA')">
                    <span>{{$t('dataAnalysis.gtPA')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.gtPATips')}}
                      </div>
                      <span style="display:inline-block">{{$t('dataAnalysis.pageviews')}}</span>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.gPayNumber')">
                    <span>{{$t('dataAnalysis.gPayNumber')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.gPayNumberTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                  <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.gVToP')">
                    <span>{{$t('dataAnalysis.gVToP')}}</span>
                    <el-tooltip class="btn-item" effect="light" placement="top">
                      <div slot="content" class="btn-content">
                        {{$t('dataAnalysis.gVToPTips')}}
                      </div>
                      <el-button class="btn-i-question">
                        <i class="el-icon-question"></i>
                      </el-button>
                    </el-tooltip>
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <span id="maxSelectSpan">{{$t('dataAnalysis.upTo5')}}</span>
              <span class="form-inline-select">{{$t('dataAnalysis.selected')}} {{selectNum}}/{{$t('dataAnalysis.fiveItems')}}</span>
              <!-- <el-button @click="submitTest">测试</el-button> -->
            </el-form>
          </div>
          <!-- /页面详情列表 -->
        </div>
        <!-- /实时概况板块 -->

        <!-- 单选框函数选择展示不同端数据 -->
        <div class="plat">
          <el-radio-group v-model="platValue" size="small" @change="radioChange">
            <el-radio-button label="0">{{$t('date.a')}}</el-radio-button>
            <el-radio-button label="1">pc</el-radio-button>
            <el-radio-button label="2">h5</el-radio-button>
            <el-radio-button label="3">{{$t('sysManagement.miniPrograms')}}</el-radio-button>
            <el-radio-button label="4">{{$t('dataAnalysis.android')}}</el-radio-button>
            <el-radio-button label="5">ios</el-radio-button>
          </el-radio-group>
        </div>
        <!-- /选择展示不同端数据 -->

        <!-- 告示 -->
        <div class="notice">{{$t('dataAnalysis.notice')}}</div>
        <!-- /告示 -->
        <!-- 整体看板 -->
        <div class="whole-plate">
          <!-- 图表 -->
          <page-analysis-table :prodData="prodData" :pageType="this.activeName" style="width: 100%"></page-analysis-table>
          <!-- /图表 -->
          <!-- 分页 -->
          <el-pagination
            v-if="prodData.data.length"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="page.pageIndex"
            :page-sizes="[5, 10, 20, 30, 50, 100]"
            :page-size="page.pageSize"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
          <!-- /分页 -->
        </div>
        <!-- /整体看板 -->
      </div>
      <!-- <pageEffect></pageEffect> -->
    </div>
  </div>
</template>

<script>
import PageAnalysisTable from './page-analysis-table'
import moment from 'moment'
import Big from 'big.js'
export default {
  data () {
    return {
      platValue: '0',
      activeName: '1',
      value: [0, 1],
      startTime: '',
      endTime: '',
      sumPayActualTotal: 0.00,
      dataForm: {
        group: 0,
        status: 0
      },
      form: {
        saleIndex: [], // 销售指标
        serviceIndex: [] // 服务指标
      },
      selectNum: 0, // 选择指标的数量
      sumData: [],
      prodName: null,
      prodData: {
        prodName: null, // 商品名称
        dateValue: 4, // 时间的选择
        dateRange1: null, // 时间区间
        dataForm: {
          group: null,
          status: null
        }, // 筛选信息
        form: {
          saleIndex: [''], // 销售指标
          serviceIndex: [''] // 服务指标
        }, // 指标选择信息
        sumData: [], // 所有指标
        data: [], // 数据
        params: {
          shopId: null,
          dateType: 1,
          group: 0,
          status: 0,
          prodName: null,
          startTime: null,
          endTime: null
        }
      }, // 商品 概况列表
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 5 // 每页显示多少条
      },
      isMaxSelectSpanVisible: false,
      nowActualTotal: [],
      payYesterdayActualTotal: [],
      dataArray: [],
      timeArray: [],
      nowDate: null,
      dataInfo: {},
      rate: [],
      refundRateInfo: [],
      refundRankForActualTotal: [],
      refundRankForCause: [],
      dateValue: 1,
      // 对可选日进行判断
      PickerOptions: {
        disabledDate (time) {
          let date = moment().add(-1, 'days').startOf('days').valueOf()
          return (
            time.getTime() > date   //  之后不可选
          )
        }
      },
      weekPickerOptions: {
        disabledDate (time) {
          return (
            time > moment().add(-1, 'week').endOf('week')
          )
        }
      },
      // 对可选月数进行判断
      monthPickerOptions: {
        disabledDate (time) {
          let month1 = moment().startOf('month').valueOf()
          return (
            time.getTime() > month1   //  time.getTime返回无法选中的区间，但大于当前时间时month1
          )
        }
      },
      dateOptions: [
        {
          label: this.$i18n.t('dataAnalysis.naturalDay'),
          value: 1
        },
        {
          label: this.$i18n.t('dataAnalysis.naturalWeek'),
          value: 2
        },
        {
          label: this.$i18n.t('dataAnalysis.naturalMonth'),
          value: 3
        },
        {
          label: this.$i18n.t('dataAnalysis.todayRealTime'),
          value: 4
        },
        {
          label: this.$i18n.t('dataAnalysis.nearly7'),
          value: 5
        },
        {
          label: this.$i18n.t('dataAnalysis.nearly30'),
          value: 6
        }
      ],
      dateRange: [],
      preDay: '',
      preWeek: '',
      preMonth: '', // 前一个月
      dateRange1: [], // 时间选择范围
      timeValue: '',
      start: ''
    }
  },
  mounted () {
    // this.setDate()
    // 初始化
    this.dateValue = 5
    let date = new Date()
    this.endTime = moment(date).add(-1, 'days').startOf('days').format('L')
    this.startTime = moment(date).add(-7, 'days').startOf('days').format('L')
    this.start = 0
    this.sizeChangeHandle()
  },
  updated () {

  },
  components: {
    PageAnalysisTable
  },
  watch: {
    'form.saleIndex' () {
      this.selectNum = this.form.serviceIndex.length + this.form.saleIndex.length
      this.prodData.form = this.form

      this.sumData = []
      this.sumData = this.sumData.concat(this.form.serviceIndex).concat(this.form.saleIndex)
      this.prodData.sumData = this.sumData
      var checks = document.getElementsByName('saleIndex')
      var span = document.getElementById('maxSelectSpan')
      checks.forEach(i => {
        if (this.selectNum >= 5) {
          this.textShare(span, 'red')
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
        if (this.selectNum < 5) {
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
      })
      if (this.selectNum < 5) {
        this.textShare(span, 'black')
        checks.forEach(i => {
          i.removeAttribute('disabled')
        })
      }
    },
    'form.serviceIndex' () {
      this.selectNum = this.form.saleIndex.length + this.form.serviceIndex.length
      this.prodData.form = this.form

      this.sumData = []
      this.sumData = this.sumData.concat(this.form.serviceIndex).concat(this.form.saleIndex)
      this.prodData.sumData = this.sumData

      var checks = document.getElementsByName('saleIndex')
      var span = document.getElementById('maxSelectSpan')
      checks.forEach(i => {
        if (this.selectNum >= 5) {
          this.textShare(span, 'red')
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
        if (this.selectNum < 5) {
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
      })
      if (this.selectNum < 5) {
        this.textShare(span, 'black')
        checks.forEach(i => {
          i.removeAttribute('disabled')
        })
      }
    }
  },
  methods: {
    /**
     * 刷新时间
     */
    flushDateTime () {
      var date = new Date()
      this.nowDate = moment(date).format('LL')
      this.dateRange1 = [moment(date).format('L') + ' 00:00:00', this.nowDate]
      this.prodData.dateRange1 = this.dateRange1
      this.sizeChangeHandle()
    },
    /**
     * 1:今天 2: 近七天 3:近30天 4:昨天 5:自然月
     * 1:自然日  2:自然周 3:自然月 4:今日实时 5:近七天 6:近30天
     * 1、2、3需要传时间戳，4、5、6不需要
     */
    setDateRange (val) {
      var startDay = null
      var endDay = null
      this.dateValue = val
      let date = new Date()
      if (val === 4) {
        startDay = 0
        endDay = 0
        this.flushDateTime()
        return
      } else if (val === 5) {
        this.endTime = moment(date).add(-1, 'days').endOf('days').format('L')
        this.startTime = moment(date).add(-7, 'days').startOf('days').format('L')
        startDay = -6
        endDay = 0
      } else if (val === 6) {
        this.endTime = moment(date).add(-1, 'days').endOf('days').format('L')
        this.startTime = moment(date).add(-30, 'days').startOf('days').format('L')
      } else if (val === 1) {
        this.preDay = moment().add(-1, 'days').format('L')
        startDay = 0
        endDay = 0
        this.start = moment(date).add(-1, 'days').valueOf()
      } else if (val === 3) {
        this.preMonth = moment().add(-1, 'month').valueOf()
        this.start = this.preMonth
      } else if (val === 2) {
        let week = moment().add(-1, 'week').startOf('week')
        this.preWeek = week
        this.start = week.valueOf()
        this.startTime = moment(week).format('L')
        this.endTime = moment(week).endOf('week').format('L')
        this.sizeChangeHandle()
        return
      }
      const time = moment().add(-1, 'days')
      // 开始时间
      var startTime = moment(time).add(startDay, 'days').startOf('days').format('L')
      // 结束时间
      var endTime = moment(time).add(endDay, 'days').startOf('days').format('L')
      this.dateRange = [startTime, endTime]
      this.sizeChangeHandle()
    },
    /**
     * 获取前一个月的时间
     */
    getPreMonth () {
      var d2 = moment().add(-1, 'month').startOf('month')
      var timeStar = d2.format('L')
      var timeEnd = d2.endOf('month').format('L')
      this.dateRange1 = [timeStar, timeEnd]
      this.prodData.dateRange1 = this.dateRange1
      this.getProdEffect(this.page)
    },
    changeDay () {
      this.start = this.preDay ? this.preDay.getTime() : null
      this.sizeChangeHandle()
    },
    changeWeek () {
      this.start = this.preWeek ? this.preWeek.getTime() : null
      this.startTime = this.start ? moment(this.start).startOf('week').format('L') : ''
      this.endTime = this.start ? moment(this.start).endOf('week').format('L') : ''
      this.sizeChangeHandle()
    },
    changeMonth () {
      this.start = this.preMonth
      this.sizeChangeHandle()
    },
    /**
     * 获取商品概况数据
     */
    getProdEffect (page) {
      // this.dataListLoading = true
      // // 请求参数传给表格子组件
      this.$http({
        url: this.$http.adornUrl('/platform/flowPageAnalysis/page'),
        method: 'get',
        params: this.$http.adornParams(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            systemType: this.platValue,  // 系统类型 0:全部 1:pc  2:h5  3:小程序 4:安卓  5:ios
            pageType: this.activeName,   // 1:页面统计数据  2:商品详情页数据
            start: this.start,
            timeType: this.dateValue   // 1、2、3需要传时间戳，4、5、6不需要，1:自然日  2:自然周 3:自然月 4:今日实时 5:近七天 6:近30天，自然周没有
          }
        )
      }).then(({ data }) => {
        this.prodData.data = data.records
        if (data) {
          data.records.forEach(element => {
            if (element.singleProdRate > 0) {
              Big.DP = 2
              element.singleProdRate = new Big(element.singleProdRate).times(100).toFixed()
            }
          })
          this.prodData.data = data.records
          this.page.total = data.total
          this.page.pageSize = data.size
          this.page.currentPage = data.current
          this.dataListLoading = false
        }
      })
    },

    /**
    * 导航栏切换的响应函数
    */
    handleClick (tab, event) {
      // this.getProdEffect(this.page)
      this.sizeChangeHandle()
    },

    // 单选框切换的响应
    radioChange (val) {
      // this.getProdEffect(this.page)
      this.sizeChangeHandle()
    },

    // 每页数
    sizeChangeHandle (val) {
      this.page.pageSize = !val ? this.page.pageSize : val
      this.page.currentPage = 1
      this.$forceUpdate()
      this.getProdEffect(this.page)
    },
    // 当前页
    currentChangeHandle (val) {
      this.page.currentPage = val
      this.getProdEffect(this.page)
    },
    /**
     * 文字效果
     */
    textShare (div, color) {
      div.style.color = color
    }
  }
}
</script>

<style lang="scss">
.page-home {
  /* 公共样式 */
  .base-section {
    padding: 16px;
    background-color: #f7f8fa;
    margin-bottom: 16px;
  }
  .base-section__header {
    display: flex;
    margin-bottom: 24px;
    align-items: center;
  }
  .base-section__header-title {
    display: flex;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }
  /* /公共样式 */

  /* 多项选择 */
  .form-inline-select {
    color: #616060;
    padding-left: 6px;
  }
  .btn-item {
    width: 100px;
  }
  .btn-i-question {
    border: none;
    width: 10px;
    height: 10px;
    padding: 0;
  }
  /* /多项选择 */

  .mod-page-effect {
    .base-section {
      background-color: #fff;
      margin-bottom: 16px;
    }

    // 栏目标题行
    .header-title {
      display: inline-block;
    }
    .title-line {
      background: #f8f8f8;
      padding: 12px;
      font-size: 12px;
      display: flex;
    }
    .item-list {
      background: #f8f8f8;
      margin: 20px 0 30px;
    }
    .form-inline {
      margin-left: 0;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .el-pagination {
      padding: 10px 5px 10px;
      background: #fff;
    }
    .form-inline-title {
      display: inline-block;
      float: left;
      padding-top: 14px;
      height: 60px;
      width: 80px;
    }
    .title-text-info {
      background: #f8f8f8;
    }
    .title-left {
      text-align: left;
      display: inline;
      margin-top: 0.5em;
      width: 80%;
    }
    .title-right {
      text-align: right;
      display: inline;
      width: 20%;
    }
    .title-picker {
      display: inline;
    }
    .blue-vertical {
      display: inline-block;
      width: 3px;
      height: 1em;
      background: #155bd4;
      margin-right: 0.5em;
      vertical-align: middle;
    }
    .title-time {
      color: #999999;
      vertical-align: middle;
      vertical-align: middle;
    }

    /* 平台选择 */
    .plat {
      margin-bottom: 16px;
    }
    /* /平台选择 */

    /* 告示 */
    .notice {
      margin-bottom: 16px;
    }
    /* /告示 */
  }
}
</style>
<style>
.el-tooltip__popper .btn-content{
  width: auto;
  max-width: 350px !important;
  word-break: break-all;
}
</style>
